<!doctype html>
<html class="no-js h-100" lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link th:href="@{/css/all.css}" rel="stylesheet">
    <link th:href="@{'https://fonts.googleapis.com/icon?family='+'Material+Icons'}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" id="main-stylesheet" data-version="1.1.0" th:href="@{/styles/shards-dashboards.1.1.0.min.css}">
    <link rel="stylesheet" th:href="@{/styles/extras.1.1.0.min.css}">
    <script async defer th:src="@{/js/buttons.js}"></script>
      <style>
          .menu-dark-backdrop {
              background: rgba(0,0,0,0);
              transition: all 0.4s ease;
              -moz-transition: all 0.4s ease;
              -webkit-transition: all 0.4s ease;
              -o-transition: all 0.4s ease;
              width: 100%;
              position: fixed;
              top: 0px;
              left: 0;
              right: 0;
              bottom: 0;
              display: none;
          }
          .menu-dark-backdrop.in {
              height: 100%;
              z-index: 90001;
              display: block;
              background: rgba(0,0,0,0.5);
          }
          .left{
              z-index: 90002;
              position: relative;
              left: 21%;
          }
      </style>
  </head>
<!--  <div id="update" class="menu-dark-backdrop">-->
<!--      <div class="left">-->
<!--      <div class="col-lg-9 col-md-12">-->
<!--          &lt;!&ndash; Add New Post Form &ndash;&gt;-->
<!--          <div class="card card-small mb-3">-->
<!--              <div class="card-body">-->
<!--                  <form action="/index/updatePost" class="add-new-post" id="from">-->
<!--                      <input name="title" class="form-control form-control-lg mb-3" type="text" placeholder="Your Post Title">-->
<!--                      <input name="date" class="form-control form-control-lg mb-3" type="date">-->
<!--                      <input name="head_portrait" class="form-control form-control-lg mb-3" type="text" list="backList" placeholder="Your Post Image">-->
<!--                      <datalist id="backList">-->
<!--                          <option th:each="image:${imageList}" th:value="${image.image}">图片</option>-->
<!--                      </datalist>-->
<!--                      <input name="background" class="form-control form-control-lg mb-3" type="text" list="imageList" placeholder="Your Post BackGround">-->
<!--                      <datalist id="imageList">-->
<!--                          <option th:each="back:${backList}" th:value="${back.back}">图片</option>-->
<!--                      </datalist>-->
<!--                      <div class="form-group col-md-12">-->
<!--                          <label for="feDescription">Content</label>-->
<!--                          <textarea id="feDescription" class="form-control" name="content" rows="5"></textarea>-->
<!--                      </div>-->
<!--                      <li class="list-group-item d-flex px-3">-->
<!--                          <div class="btn btn-sm btn-outline-accent" onclick="Cancel()">Cancel</div>-->
<!--                          <a th:href="@{'/index/deletePost'}" class="btn btn-sm btn-outline-accent ml-auto" id="delete">Delete</a>-->
<!--                          <button class="btn btn-sm btn-accent " type="submit">-->
<!--                              Update-->
<!--                          </button>-->
<!--                      </li>-->
<!--                  </form>-->
<!--              </div>-->
<!--          </div>-->
<!--          &lt;!&ndash; / Add New Post Form &ndash;&gt;-->
<!--      </div>-->
<!--      </div>-->
<!--  </div>-->
  <body class="h-100">
    <div class="container-fluid">
      <div class="row">
        <main class="main-content col-lg-10 col-md-9 col-sm-12 p-0 offset-lg-2 offset-md-3">
          <div class="main-content-container container-fluid px-4" >
<!--            第一行已完成-->
            <div class="row">
              <div class="col-lg-3 col-md-6 col-sm-12 mb-4" th:each="post:${postList}">
                <div class="card card-small card-post card-post--1">
                  <div class="card-post__image" th:style="'background-image: url('+${post.background}+')'" id="image">
                    <div class="card-post__author d-flex">
                      <a href="javascript:void(0)" class="card-post__author-avatar card-post__author-avatar--small" th:style="'background-image: url('+${post.head_portrait}+')'" >Written by Anna Kunis</a>
                    </div>
                  </div>
                  <div class="card-body">
                    <h5 class="card-title">
                      <div class="text-fiord-blue" th:text="${post.title}"></div>
                    </h5>
                    <p class="card-text d-inline-block mb-3" th:text="${post.content}"></p>
                    <span class="text-muted" th:text="${post.date}"></span>
                  </div>
                </div>
              </div>
            </div>


            <div class="row">
              <div class="col-lg-6 col-sm-12 mb-4" th:each="post:${postList2}">
                <div class="card card-small card-post card-post--aside card-post--1">
                  <div class="card-post__image" th:style="'background-image: url('+${post.background}+')'">
                    <div class="card-post__author d-flex">
                      <a href="#" class="card-post__author-avatar card-post__author-avatar--small" th:style="'background-image: url('+${post.head_portrait}+')'"></a>
                    </div>
                  </div>
                  <div class="card-body">
                    <h5 class="card-title">
                      <a class="text-fiord-blue" href="#" th:text="${post.title}"></a>
                    </h5>
                    <p class="card-text d-inline-block mb-3" th:text="${post.content}"></p>
                    <span class="text-muted" th:text="${post.date}"></span>
                  </div>
                </div>
              </div>
            </div>


            <div class="row">
              <div class="col-lg-4" th:each="post:${postList3}">
                <div class="card card-small card-post mb-4">
                  <div class="card-body">
                      <div style="display: none" th:text="${post.title}"></div>
                      <span style="display: none" th:text="${post.date}"></span>
                    <p class="card-text text-muted" th:text="${post.content}"></p>
                  </div>
                  <div class="card-footer border-top d-flex">
                    <div class="card-post__author d-flex">
                      <a href="#" class="card-post__author-avatar card-post__author-avatar--small" th:style="'background-image: url('+${post.head_portrait}+')'">Written by James Khan</a>
                      <div class="d-flex flex-column justify-content-center ml-3" >
                        <small class="text-muted" th:text="${post.date}"></small>
                      </div>
                    </div>
                    <div class="my-auto ml-auto" id="title">
                    </div>
                  </div>
                </div>
              </div>
            </div>


            <div class="row">
              <div class="col-lg-3 col-md-6 col-sm-12 mb-4" th:each="post:${postList4}">
                <div class="card card-small card-post h-100">
                  <div class="card-post__image" th:style="'background-image: url('+${post.background}+')'"></div>
                  <div class="card-body">
                    <h5 class="card-title">
                      <a class="text-fiord-blue" href="#" th:text="${post.title}"></a>
                        <small class="text-muted" th:text="${post.date}"></small>
                    </h5>
                    <p class="card-text" th:text="${post.content}" ></p>
                  </div>
                  <div class="card-footer text-muted border-top py-3">
                    <span class="d-inline-block">4577广告招租
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>

<!--    <script>-->
<!--        var update=document.getElementById("update");-->
<!--        function Edit(op){-->
<!--            update.classList.add("in");-->
<!--            var del=$("#delete");-->
<!--            var inputs=$("#from").find("input");-->
<!--            var content=$("#from").find("textarea");-->
<!--            var title=$(op).children("h5").find("div").text();-->
<!--            var backLists=document.getElementById("backList").children;-->
<!--            content.val($(op).children("p").text());-->
<!--            inputs.eq(0).val(title);-->
<!--            inputs.eq(1).val($(op).children("span").text());-->
<!--            del.attr('href',"/index/deletePost/"+title);-->
<!--        }-->
<!--        function Edit2(op){-->
<!--            update.classList.add("in");-->
<!--            var del=$("#delete");-->
<!--            var inputs=$("#from").find("input");-->
<!--            var content=$("#from").find("textarea");-->
<!--            var title=$(op).children("h5").find("a").text();-->
<!--            var backLists=document.getElementById("backList").children;-->
<!--            content.val($(op).children("p").text());-->
<!--            inputs.eq(0).val(title);-->
<!--            inputs.eq(1).val($(op).children("span").text());-->
<!--            del.attr('href',"/index/deletePost/"+title);-->
<!--        }-->

<!--        function Edit3(op){-->
<!--            update.classList.add("in");-->
<!--            var del=$("#delete");-->
<!--            var inputs=$("#from").find("input");-->
<!--            var content=$("#from").find("textarea");-->
<!--            var title=$(op).children("div").text();-->
<!--            var backLists=document.getElementById("backList").children;-->
<!--            content.val($(op).children("p").text());-->
<!--            inputs.eq(0).val(title);-->
<!--            inputs.eq(1).val($(op).children("span").text());-->
<!--            del.attr('href',"/index/deletePost/"+title);-->
<!--        }-->

<!--        function Edit4(op){-->
<!--            update.classList.add("in");-->
<!--            var del=$("#delete");-->
<!--            var inputs=$("#from").find("input");-->
<!--            var content=$("#from").find("textarea");-->
<!--            var title=$(op).children("h5").find("a").text();-->
<!--            var backLists=document.getElementById("backList").children;-->
<!--            content.val($(op).children("p").text());-->
<!--            inputs.eq(0).val(title);-->
<!--            inputs.eq(1).val($(op).children("h5").find("small").text());-->
<!--            del.attr('href',"/index/deletePost/"+title);-->
<!--        }-->

<!--        function Cancel(){-->
<!--            update.classList.remove("in");-->
<!--        }-->

<!--    </script>-->
    <script th:src="@{/scripts/jquery-3.3.1.min.js}"></script>
    <script th:src="@{/scripts/popper.min.js}"></script>
    <script th:src="@{/scripts/bootstrap.min.js}"></script>
    <script th:src="@{/scripts/Chart.min.js}"></script>
    <script th:src="@{/scripts/shards.min.js}"></script>
    <script th:src="@{/scripts/jquery.sharrre.min.js}"></script>
    <script th:src="@{/scripts/extras.1.1.0.min.js}"></script>
    <script th:src="@{/scripts/shards-dashboards.1.1.0.min.js}"></script>
    <script th:src="@{/scripts/app/app-blog-overview.1.1.0.js}"></script>
    <script th:src="@{/scripts/shards-dashboards.1.1.0.min.js}"></script>
    <script th:src="@{https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.min.js}"></script>
    <script th:src="@{/scripts/app/app-blog-new-post.1.1.0.js}"></script>
  </body>
</html>